<template>
  <div class="dh">
    <m-header :title="title"></m-header>
    <div class="content">
      <!-- 滚动条 -->
      <Carousel autoplay loop>
        <CarouselItem v-for="item in imgdata" :key="item.id">
          <img class="carousel" :src="item.img">
        </CarouselItem>
      </Carousel>
      <!-- 菜单 -->
      <div class="box">
        <!--  第一行 -->
        <div class="item" v-for="item in menu_data" :key="item.id" @click="menu(item.id)">
          <img :src="item.img" class="menu-img">
          <div class="menu-text">{{item.text}}</div>
        </div>
      </div>
      <!-- 第二行 -->
      <div class="box">
        <div class="item" v-for="item in img_data2" :key="item.id" @click="menu(item.id)">
          <img :src="item.img" class="menu-img">
          <div class="menu-text">{{item.text}}</div>
        </div>
      </div>
      <!-- 推荐图 -->
      <div class="recmm-img-box">
        <img src="../../assets/jinping.png" class="recommend-img">
      </div>
      <!-- 推荐 -->
      <div class="recmm-box">
        <img src="../../assets/64.png" class="recmm-img">
        <div class="recmm-title">帕劳旅拍</div>
        <div class="recmm-pric">￥1880</div>
      </div>
    </div>
  </div>
</template>
<script>
import MHeader from "components/header/header";
export default {
  name: "index",
  components: {
    MHeader
  },
  data() {
    return {
      title: "帕劳通",
      imgdata: [
        {
          img: require("../../assets/2.jpg")
        },
        {
          img: require("../../assets/3.jpg")
        },
        {
          img: require("../../assets/4.jpg")
        }
      ],
      menu_data: [
        {
          id: 1,
          text: "机票预订",
          img: require("../../assets/fly.png")
        },
        {
          id: 2,
          text: "酒店预订",
          img: require("../../assets/Hotel.png")
        },
        {
          id: 3,
          text: "船车出租",
          img: require("../../assets/ship.png")
        },
        {
          id: 4,
          text: "潜水预订",
          img: require("../../assets/Diving.png")
        },
        {
          id: 5,
          text: "婚纱旅拍",
          img: require("../../assets/lvpai.png")
        }
      ],
      img_data2: [
        {
          id: 6,
          text: "交友微博",
          img: require("../../assets/mf.png")
        },
        {
          id: 7,
          text: "景区活动",
          img: require("../../assets/map.png")
        },
        {
          id: 8,
          text: "餐厅预订",
          img: require("../../assets/cook.png")
        },
        {
          id: 9,
          text: "生活购物",
          img: require("../../assets/shop.png")
        },
        {
          id: 10,
          text: "生活缴费",
          img: require("../../assets/money.png")
        }
      ]
    };
  },
  methods: {
    menu(id) {
      switch (id) {
        case 1:
          this.$router.push({ path: "/airticket" });
          break;
        case 2:
          this.$router.push({ path: "/hotel" });
          break;
        case 3:
          this.$router.push({ path: "/car_rental" });
          break;
        case 4:
          this.$router.push({ path: "/diving" });
          break;
        case 5:
          this.$router.push({ path: "/wedding_dress" });
          break;
        case 6:
          this.$router.push({ path: "" });
          break;
        case 7:
          this.$router.push({ path: "/activity" });
          break;
        case 8:
          this.$router.push({ path: "/restaurant" });
          break;
        case 9:
          this.$router.push({ path: "" });
          break;
        case 10:
          this.$router.push({ path: "" });
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable';

.dh {
  width: 100%;
  height: 100%;
}

.content {
  padding-top: 100px;
  padding-bottom: 100px;
  background: $color-background;

  .carousel {
    width: 100%;
    height: 375px;
    background-position: center;
    background-size: cover;
  }

  .box {
    display: flex;
    flex-wrap: wrap;
    background-color: $color-text;
    justify-content: space-around;
    align-items: center;

    .item {
      text-align: center;

      .menu-img {
        width: 88px;
        height: 88px;
        margin-bottom: 10px;
        margin-top: 20px;
      }

      .menu-text {
        font-size: 25px;
        font-weight: bold;
        color: $color-text-l;
      }
    }
  }

  .recmm-img-box {
    margin-top: 16px;
    background-color: $color-text;
    width: 100%;
    text-align: center;
    padding: 27px 256px 26px 230px;

    .recommend-img {
      height: 40px;
    }
  }

  .recmm-box {
    text-align: center;

    .recmm-img {
      width: 750px;
      height: 750px;
    }

    .recmm-title {
      font-size: 25px;
      font-family: YouYuan;
      font-weight: bold;
      color: #333333;
    }

    .recmm-pric {
      font-size: 18px;
      font-family: YouYuan;
      font-weight: bold;
      color: #FF7900;
    }
  }
}
</style>

